jStorage是ㄧ個優秀的控制localstorage的工具,此文章簡單示範使用的方式以及一些使用資訊。
Blogger 備份
http://ryanyang-0818.blogspot.tw/2015/02/jstorage.html
jStorage 使用
一、前言
二、使用資訊
三、使用範例
set / get
deleteKey(key)
setTTL(key, ms)
getTTL(key)
index()
storageSize()
listenKeyChange(key, callback) / stopListening(key[, callback])
subscribe(channel, callback) / publish(channel, payload)
一、前言
jStorage是ㄧ個優秀的控制localstorage的工具,此文章簡單示範使用的方式以及一些使用資訊。
二、使用資訊
一般來說,jStorage可搭配jQuery、prototype使用,但筆者這邊只有用jQuery來RUN,
此外,在舊一點的瀏覽器,例如說IE6,需要額外載入JSON2套件來做搭配,新一點的瀏覽器就不用了。
JSON2載點http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js
jStorage載點https://raw.githubusercontent.com/andris9/jStorage/master/jstorage.js
三、使用範例
set / get
$.jStorage.set('商品編號', ‘1234567’) ;
var itno = $.jStorage.get('商品編號') ; // itno = ‘1234567’
$.jStorage.set('商品編號') ;
var itno = $.jStorage.get('商品編號') ; // itno = null ;
deleteKey(key)
$.jStorage.set('商品編號', '1234567') ;
var flag = $.jStorage.deleteKey('商品編號') ; //flag = true
//第二次刪不到東西,會回傳false
var flag = $.jStorage.deleteKey('商品編號') ; //flag = false
setTTL(key, ms)
$.jStorage.set('商品編號', '1234567') ;
$.jStorage.setTTL('商品編號', 3000) ;
// 三秒後
var val = $.jStorage.get('商品編號') ; // val = null
getTTL(key)
$.jStorage.set('商品編號', '1234567') ;
"1234567"
$.jStorage.setTTL('商品編號', 15000) ;
true
$.jStorage.getTTL('商品編號') ;
8604
$.jStorage.getTTL('商品編號') ;
7702
$.jStorage.getTTL('商品編號') ;
6943
$.jStorage.getTTL('商品編號') ;
6158
//15秒過後
$.jStorage.getTTL('商品編號') ;
index()
$.jStorage.set('商品編號', '1234567') ;
"1234567"
$.jStorage.index() ;
["商品編號"]
$.jStorage.set('價錢', '550') ;
"550"
$.jStorage.index() ;
["商品編號", "價錢"]
storageSize()
$.jStorage.storageSize() ;
108 //回傳bytes大小
listenKeyChange(key, callback) / stopListening(key[, callback])
//針對商品編號綁定兩個事件
$.jStorage.listenKeyChange("商品編號", function(key, action){
console.log(key + " has been " + action + ', do action1');
});
$.jStorage.listenKeyChange("商品編號", function(key, action){
console.log(key + " has been " + action + ', do action2');
});
$.jStorage.set('商品編號', '123456789') ;
商品編號 has been updated, do action1
商品編號 has been updated, do action2
//兩個都會觸發
$.jStorage.listenKeyChange("郵遞區號", function(key, action){
console.log(key + " has been " + action);
});
$.jStorage.set('郵遞區號', '12345') ;
郵遞區號 has been updated
//即便是新增KEY,action依舊是updated
$.jStorage.get('郵遞區號') ;
//get不會觸發
$.jStorage.deleteKey('郵遞區號') ;
VM220:3 郵遞區號 has been deleted
//刪除會觸發,且 action是deleted
$.jStorage.listenKeyChange("數量", function(key, action){
console.log(key + " has been " + action);
});
$.jStorage.set('數量', '5') ;
數量 has been updated
//成功綁定
$.jStorage.stopListening("數量");
$.jStorage.set('數量', '5') ;
// 沒事發生,事件已經被移除
subscribe(channel, callback) / publish(channel, payload)
$.jStorage.subscribe("ch1", function(channel, payload){
console.log(payload+ " from " + channel);
});
$.jStorage.publish("ch1", "data") ;
data from ch1
//可以利用訂閱、發佈功能來變成資料訂閱中心